<template>
	<view class="container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">加载中...</view>

		<!-- 错误提示 -->
		<view v-if="error" class="error">{{ error }}</view>

		<!-- 数据统计（可根据需求保留/删除） -->
		<view v-if="orderData && orderData.length" class="stats">
			<text>预约订单加载成功！</text>
			<text>共 {{ orderData.length }} 条待服务记录</text>
		</view>

		<!-- 订单列表：仅显示待服务状态的订单 -->
		<view class="order-list" v-if="orderData && orderData.length">
			<view v-for="(item, index) in orderData" :key="item.appointmentOrderId || index" class="order-card">
				<!-- 头像+医生信息+状态 -->
				<view class="card-header">
					<image class="doctor-avatar" :src="item.avatar ? item.avatar : '/static/default-avatar.png'"
						mode="widthFix"></image>
					<view class="doctor-info">
						<text class="doctor-name">{{ item.doctorName }}</text>
						<text class="doctor-level">{{ getDoctorLevelText(item.doctorLevelId) }}</text>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order-info">
					<view class="info-item">
						<text class="label">订单号：</text>
						<text class="value">{{ item.appointmentOrderNumber }}</text>
					</view>
					<view class="info-item">
						<text class="label">创建时间：</text>
						<text class="value">{{ item.appointmentOrderCreateTime }}</text>
					</view>
					<view class="info-item">
						<text class="label">支付时间：</text>
						<text
							class="value">{{ item.appointmentOrderPayTime ? item.appointmentOrderPayTime : '未支付' }}</text>
					</view>
				</view>

				<!-- 底部：价格+状态标签 -->
				<view class="card-footer">
					<text class="price">¥{{ item.appointmentOrderPrice.toFixed(2) }}</text>
					<view class="status-tag" :class="getStatusClass(item.appointmentOrderStatus)">
						{{ getStatusText(item.appointmentOrderStatus) }}
					</view>
				</view>
			</view>
		</view>

		<!-- 无数据提示（仅待服务状态为空时显示） -->
		<view v-if="!loading && !error && (orderData && orderData.length === 0)" class="empty">
			暂无待服务的预约订单
		</view>
	</view>
</template>

<script>
	import {
		queryAllOrders
	} from '@/api/order.js'

	export default {
		data() {
			return {
				orderData: null,
				loading: false,
				error: null
			}
		},

		onLoad() {
			const userId = this.$store.state.userId
			if (!userId) {
				this.error = '未获取到用户信息，请重新登录'
				return
			}
			this.loadOrders(userId)
		},

		methods: {
			async loadOrders(userId) {
				this.loading = true
				try {
					const response = await queryAllOrders({
						userId
					})
					if (response && response.code === 200) {
						// 关键：过滤出【待服务】状态（status=0）的订单
						this.orderData = (response.data || []).filter(
							item => item.appointmentOrderStatus === 0
						)
					} else {
						this.error = response?.msg || '获取预约订单失败，请重试'
					}
				} catch (err) {
					this.error = '网络错误：' + (err.message || '无法连接服务器')
				} finally {
					this.loading = false
				}
			},

			getDoctorLevelText(levelId) {
				const levelMap = {
					0: '主治医师',
					1: '副主任医师',
					2: '主任医师'
				}
				return levelMap[levelId] || '未知职称'
			},

			getStatusText(status) {
				const statusMap = {
					0: '待服务',
					1: '服务中',
					2: '已完成',
					3: '已取消'
				}
				return statusMap[status] || '未知状态'
			},

			getStatusClass(status) {
				const classMap = {
					0: 'status-pending',
					1: 'status-paid',
					2: 'status-canceled',
					3: 'status-completed'
				}
				return classMap[status] || 'status-default'
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.loading,
	.error,
	.empty {
		text-align: center;
		padding: 40rpx 0;
		font-size: 28rpx;
	}

	.error {
		color: #ff4d4f;
	}

	.empty {
		color: #999;
	}

	.stats {
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #333;
	}

	.stats text+text {
		margin-left: 20rpx;
	}

	.order-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.order-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.doctor-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #f0f0f0;
		margin-right: 20rpx;
	}

	.doctor-info {
		display: flex;
		flex-direction: column;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}

	.doctor-level {
		font-size: 24rpx;
		color: #999;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.order-info {
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 24rpx;
	}

	.label {
		color: #999;
		min-width: 140rpx;
	}

	.value {
		color: #333;
		flex: 1;
		word-break: break-all;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		font-size: 32rpx;
		font-weight: 500;
		color: #ff4d4f;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.status-pending {
		background-color: #fff3cd;
		color: #fd7e14;
	}

	.status-paid {
		background-color: #d4edda;
		color: #28a745;
	}

	.status-canceled {
		background-color: #e9ecef;
		color: #6c757d;
	}

	.status-completed {
		background-color: #d1ecf1;
		color: #17a2b8;
	}

	.status-default {
		background-color: #f0f0f0;
		color: #999;
	}
</style>